html {
  /* 侧边栏深色渐变色 */
  .gradient_dark_sidebar1 {
    background: linear-gradient(to right, #524e4d, #2e2e2e);
  }

  /* 侧边栏深色渐变色 */
  .gradient_dark_sidebar2 {
    background: linear-gradient(to bottom, #24253c, #2f2a62, #0f0c2d);
  }

  /* 侧边栏浅色渐变色 */
  .gradient_light_sidebar1 {
    background: linear-gradient(90deg, #e7e6eb, #cdc9e1);
  }

  /* 侧边栏深色背景图 */
  .bg_dark_sidebar1 {
    background-image: url('@/assets/sidebar_dark_bg1.gif');
    background-position: center bottom;
    background-size: cover;
  }

  /* 侧边栏浅色背景图 */
  .bg_light_sidebar1 {
    background-image: url('@/assets/sidebar_light_bg1.gif');
    background-position: center center;
    background-size: cover;
  }

  &.light {
    body {
      &[data-menu-theme='light'] {
        .vk-layout-sidebar__wrap {
          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
        }
      }

      /* 菜单白背景时变量控制 */
      &[data-menu-theme*='light'] {
        .vk-layout-sidebar__wrap {
          --el-button-hover-bg-color: rgba(0, 0, 0, 0.05); /* logo、底部折叠按钮鼠标经过背景色 */

          .el-menu {
            --el-menu-text-color: var(--el-text-color-regular); /* 无子级菜单的默认文本色 */
            --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
            --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
            --el-submenu-text-color: var(--el-text-color-regular); /* 有子级菜单的默认文本色 */
            --el-submenu-hover-text-color: var(--el-text-color-primary); /* 有子级菜单的hover文本色 */
            --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
            --el-menu-bg-color: transparent; /* 默认菜单背景色 */
            --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
            --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
            --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
            --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */

            /* 子菜单 */
            .el-menu {
              --el-menu-bg-color: var(--el-color-white); /* 子级默认背景色 */
            }
          }
        }

        .vk-layout-container.is-arrow {
          .vk-layout-sidebar__wrap {
            .el-menu {
              --el-menu-hover-text-color: var(--el-color-primary); /* 无子级菜单的hover文本色 */
              --el-menu-active-text-color: var(--el-color-primary); /* 无子级菜单的active文本色 */
            }
          }
        }

        /* 次级菜单变量控制 */
        .el-popper {
          .el-menu--vertical {
            .el-menu {
              --el-menu-text-color: var(--el-text-color-regular); /* 无子级菜单的默认文本色 */
              --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
              --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
              --el-submenu-text-color: var(--el-text-color-regular); /* 有子级菜单的默认文本色 */
              --el-submenu-hover-text-color: var(--el-text-color-primary); /* 有子级菜单的hover文本色 */
              --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
              --el-menu-bg-color: transparent; /* 默认菜单背景色 */
              --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
              --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
              --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
              --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */
            }
          }
        }
      }

      /* 菜单非白背景时变量控制 */
      &:not([data-menu-theme*='light']) {
        /* 主菜单变量控制 */
        .vk-layout-sidebar__wrap {
          --el-button-hover-bg-color: rgba(255, 255, 255, 0.1); /* logo、底部折叠按钮鼠标经过背景色 */
          --el-border-color-extra-light: transparent; /* 侧边栏非白背景时上边框色 */

          .el-menu {
            --el-menu-text-color: rgba(255, 255, 255, 0.65); /* 无子级菜单的默认文本色 */
            --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
            --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
            --el-submenu-text-color: rgba(255, 255, 255, 0.65); /* 有子级菜单的默认文本色 */
            --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
            --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
            --el-menu-bg-color: transparent; /* 默认菜单背景色 */
            --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
            --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
            --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
            --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */

            /* 次级菜单 */
            .el-menu {
              --el-menu-bg-color: var(--el-submenu-bg-color); /* 子级默认背景色 */
            }
          }
        }

        /* 次级菜单变量控制 */
        .el-popper {
          .el-menu--vertical {
            .el-menu {
              --el-menu-text-color: rgba(255, 255, 255, 0.65); /* 无子级菜单的默认文本色 */
              --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
              --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
              --el-submenu-text-color: rgba(255, 255, 255, 0.65); /* 有子级菜单的默认文本色 */
              --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
              --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
              --el-menu-bg-color: var(--el-submenu-bg-color); /* 默认菜单背景色 */
              --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
              --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
              --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
              --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */
            }
          }
        }
      }

      /* 分栏模式次级菜单变量控制 */
      .vk-layout-sub__menu {
        --el-submenu-bg-color: #ffffff;

        .el-menu {
          --el-menu-text-color: var(--el-text-color-regular); /* 无子级菜单的默认文本色 */
          --el-menu-hover-text-color: var(--el-color-primary); /* 无子级菜单的hover文本色 */
          --el-menu-active-text-color: var(--el-color-primary); /* 无子级菜单的active文本色 */
          --el-submenu-text-color: var(--el-text-color-regular); /* 有子级菜单的默认文本色 */
          --el-submenu-hover-text-color: var(--el-text-color-primary); /* 有子级菜单的hover文本色 */
          --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
          --el-menu-bg-color: transparent; /* 默认菜单背景色 */
          --el-menu-hover-bg-color: var(--el-color-primary-light-9); /* 无子级菜单hover背景色 */
          --el-menu-active-color: var(--el-color-primary-light-9); /* 无子级菜单active背景色 */
          --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
          --el-submenu-active-bg-color: transparent; /* 有子级active背景色 */
        }
      }

      /* 渐变色、背景图时次级菜单背景色变量控制 */
      &[data-menu-theme*='gradient_'],
      &[data-menu-theme*='bg_'] {
        .vk-layout-sidebar__wrap {
          .el-menu {
            .el-menu {
              --el-menu-bg-color: transparent !important; /* 子级默认背景色 */
            }
          }
        }
      }
    }
  }

  &.dark {
    body {
      /* 主菜单变量控制 */
      .vk-layout-sidebar__wrap {
        --el-button-hover-bg-color: rgba(255, 255, 255, 0.1); /* logo、底部折叠按钮鼠标经过背景色 */

        .el-menu {
          --el-menu-text-color: rgba(255, 255, 255, 0.65); /* 无子级菜单的默认文本色 */
          --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
          --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
          --el-submenu-text-color: rgba(255, 255, 255, 0.65); /* 有子级菜单的默认文本色 */
          --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
          --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
          --el-menu-bg-color: transparent; /* 默认菜单背景色 */
          --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
          --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
          --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
          --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */

          /* 次级菜单 */
          .el-menu {
            --el-menu-bg-color: var(--el-submenu-bg-color); /* 子级默认背景色 */
          }
        }
      }

      /* 分栏模式变量控制 */
      .vk-layout-sub__menu {
        .el-divider--horizontal {
          .el-divider__text {
            --el-bg-color: var(--el-submenu-bg-color); /* 分栏模式分割线背景色 */
          }
        }

        .el-menu {
          --el-menu-text-color: rgba(255, 255, 255, 0.65); /* 无子级菜单的默认文本色 */
          --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
          --el-menu-active-text-color: var(--el-color-primary); /* 无子级菜单的active文本色 */
          --el-submenu-text-color: rgba(255, 255, 255, 0.65); /* 有子级菜单的默认文本色 */
          --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
          --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
          --el-menu-bg-color: transparent; /* 默认菜单背景色 */
          --el-menu-hover-bg-color: rgba(255, 255, 255, 0.1); /* 无子级菜单hover背景色 */
          --el-menu-active-color: rgba(255, 255, 255, 0.1); /* 无子级菜单active背景色 */
          --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
          --el-submenu-active-bg-color: transparent; /* 有子级active背景色 */
        }
      }

      /* 次级菜单变量控制 */
      .el-popper {
        .el-menu--vertical {
          .el-menu {
            --el-menu-text-color: var(--el-text-color-primary); /* 无子级菜单的默认文本色 */
            --el-menu-hover-text-color: var(--el-color-white); /* 无子级菜单的hover文本色 */
            --el-menu-active-text-color: var(--el-color-white); /* 无子级菜单的active文本色 */
            --el-submenu-text-color: var(--el-text-color-primary); /* 有子级菜单的默认文本色 */
            --el-submenu-hover-text-color: var(--el-color-white); /* 有子级菜单的hover文本色 */
            --el-submenu-active-text-color: var(--el-color-primary); /* 有子级菜单的active文本色 */
            --el-menu-bg-color: var(--el-submenu-bg-color); /* 默认菜单背景色 */
            --el-menu-hover-bg-color: var(--el-color-primary); /* 无子级菜单hover背景色 */
            --el-menu-active-color: var(--el-color-primary); /* 无子级菜单active背景色 */
            --el-submenu-hover-bg-color: transparent; /* 有子级hover背景色 */
            --el-submenu-active-bg-color: var(--el-color-primary); /* 有子级active背景色 */
          }
        }
      }
    }
  }
}
